<template>
    <div  style="display: flex; align-items: center; justify-content: center; margin-top: 5px">
        <!-- 自定义的 total 文本 -->
        <span style="width: 100px"> {{ $t('总计') }}:{{ formdatabase.allcount }}</span>
        <!-- 自定义显示 "100/页" 形式 -->
        <el-select v-model="findform.pagecount" @change="handleSizeChange" style="width: 100px">
            <el-option v-for="size in [10, 50, 100, 200, 500, 1000]" :key="size" :label="size" :value="size" />
        </el-select>
        <el-pagination v-model:current-page="findform.page" v-model:page-size="findform.pagecount" background :page-sizes="[10, 50, 100, 200, 500, 1000, 5000, 10000]" layout=" prev, pager, next" :total="allcount" @size-change="handleSizeChange" @current-change="handlePageChange"> </el-pagination>
        <span>{{ $t('跳至') }}</span>
        <el-input-number style="width: 100px" v-model="jumbPage" :controls="false" @keyup.enter="onjumbEnter"></el-input-number>
    </div>
</template>
<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue';
// 定义 emits 的事件
const emit = defineEmits<{
    (event: 'update:page', value: string): void;
    (event: 'update:pagecount', value: string): void;
    (event: 'pagechange', dept: any): void;
}>();
const jumbPage = ref(1); // 跳转至第X页
interface FormDatabaseProps {
    allcount?: number;
    page?: number;
    pagecount?: number;
}
const formdatabase = withDefaults(defineProps<FormDatabaseProps>(), {
    allcount: 0,
    page: 1,
    pagecount: 50,
});
const findform = reactive({
    page: 1,
    pagecount: 10,
});
//初始化
onMounted(() => {
    findform.page=formdatabase.page;
    findform.pagecount=formdatabase.pagecount;
});

//页签变化
const handlePageChange = (newPage: number) => {
    findform.page = newPage;
    emit('update:page', newPage);
    emit('pagechange', { page: findform.page, pagecount: findform.pagecount });
};
//当前页数变化
const handleSizeChange = (newPagecount: number) => {
    findform.pagecount = newPagecount;
    emit('update:pagecount', newPagecount);
    emit('pagechange', { page: findform.page, pagecount: findform.pagecount });
};
//跳转第*页回车事件
const onjumbEnter = () => {
    findform.page = jumbPage.value;
    emit('update:page', jumbPage.value);
    emit('pagechange', { page: findform.page, pagecount: findform.pagecount });
};
</script>
